<template>
  <view class="department-detail">
    <!-- 科室信息 -->
    <view class="department-info">
      <view class="title">{{ department.name }}</view>
      <view class="desc">{{ department.description || '暂无简介' }}</view>
    </view>

    <!-- 医生列表 -->
    <view class="doctor-list">
      <view class="list-title">医生列表</view>
      <view 
        class="doctor-item" 
        v-for="doctor in doctors" 
        :key="doctor.id"
        @tap="goToSchedule(doctor.id)"
      >
        <image 
          class="avatar" 
          :src="doctor.avatar || '/static/default-doctor.png'" 
          mode="aspectFill"
        ></image>
        <view class="info">
          <view class="name-row">
            <text class="name">{{ doctor.name }}</text>
            <view class="rating">
              <text class="score">{{ doctor.rating }}</text>
              <text class="label">分</text>
            </view>
          </view>
          <view class="specialty">
            擅长：{{ doctor.specialty }}
          </view>
          <view class="bio">{{ doctor.bio }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getDepartmentById } from '@/api/department'
import { getDoctorsByDepartmentId } from '@/api/doctor'

export default {
  data() {
    return {
      department: {},
      doctors: []
    }
  },
  onLoad(options) {
    const departmentId = options.id
    this.getDepartmentDetail(departmentId)
    this.getDoctors(departmentId)
  },
  methods: {
    // 获取科室详情
    async getDepartmentDetail(id) {
      try {
        const res = await getDepartmentById(id)
        this.department = res
      } catch (error) {
        uni.showToast({
          title: '获取科室信息失败',
          icon: 'none'
        })
      }
    },
    // 获取医生列表
    async getDoctors(departmentId) {
      try {
        const res = await getDoctorsByDepartmentId(departmentId)
        this.doctors = res
      } catch (error) {
        uni.showToast({
          title: '获取医生列表失败',
          icon: 'none'
        })
      }
    },
    // 跳转到医生排班页面
    goToSchedule(doctorId) {
      uni.navigateTo({
        url: `/pages/doctor/schedule?id=${doctorId}`
      })
    }
  }
}
</script>

<style lang="scss">
.department-detail {
  min-height: 100vh;
  background: #f5f5f5;
  
  .department-info {
    background: #fff;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 16rpx;
    }
    
    .desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }
  
  .doctor-list {
    background: #fff;
    padding: 0 30rpx;
    
    .list-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #eee;
    }
    
    .doctor-item {
      display: flex;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #eee;
      
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        margin-right: 24rpx;
        background-color: #f0f0f0;  // 默认背景色
      }
      
      .info {
        flex: 1;
        
        .name-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12rpx;
          
          .name {
            font-size: 32rpx;
            font-weight: 500;
            color: #333;
          }
          
          .rating {
            .score {
              font-size: 32rpx;
              font-weight: bold;
              color: #FF9500;
            }
            
            .label {
              font-size: 24rpx;
              color: #999;
              margin-left: 4rpx;
            }
          }
        }
        
        .specialty {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 12rpx;
        }
        
        .bio {
          font-size: 26rpx;
          color: #999;
          line-height: 1.5;
        }
      }
    }
  }
}
</style> 